<template>
	<view class="calc-panel">
		<view class="calc-panel-input">
			<u-input type="text" :disabled="true" input-align="right" :value="number"
				:custom-style="{fontWeight:500,fontSize:56+'rpx'}" maxlength="15" />
		</view>

		<view class="key-grids" @touchmove.stop.prevent="() => {}">
			<view v-for="(item, index) in numList" :key="index" :hover-stay-time="100" @tap="keyboardClick(item)"
				:class="[itemClass(item)]" hover-class="b-keyboard-hover">

				<view v-if="item==='>'" :hover-stay-time="100" @touchstart.stop="backspaceClick" @touchend="clearTimer">
					<u-icon name="backspace" :size="38" :bold="true"></u-icon>
				</view>

				<view v-else-if="item==='<'" @touchstart.stop.prevent="confirm">
					确认
				</view>

				<text v-else>{{item}}</text>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: ["+", "-", "×", "÷", "1", "2", "3", ">", "4", "5", "6", "C", "7", "8", "9", "=", "+/-", "0", ".",
					"<"
				],
				number: '',
				isCompute: false,
				num_a: '',
				op: '',
				eventId: ''
			};
		},
		onLoad(query) {
			this.number = query.num;
			this.eventId = query.eventId
		},
		computed: {
			hoverClass() {
				return index => {
					return 'b-keyboard-hover';
				}
			},
			itemClass() {
				return item => {
					if (item === '<') return "key-item key-item-calc";
					return "key-item";
				};
			}
		},
		methods: {
			// 点击退格键
			backspaceClick() {
				this.backspace();
				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
				this.timer = null;
				this.timer = setInterval(() => {
					this.backspace();
				}, 250);
			},
			clearTimer() {
				clearInterval(this.timer);
				this.timer = null;
			},
			confirm() {
				this.operator("=");
				uni.$emit(this.eventId, this.number);
				uni.navigateBack();
			},
			// 获取键盘显示的内容
			keyboardClick(val) {
				// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
				if (val === '>' || val === '<') return
				else if (val === '+' || val === '-' || val === '×' || val === '÷' || val === '=') {
					this.operator(val);
					return
				} else if (val === 'C') {
					this.clear();
					return
				} else if (val === '.' && this.number.indexOf('.') >= 0){
					return;
				} else if (val === '+/-'){
					this.number = (parseFloat(this.number).toFixed(2) * -1).toString();
					return
				}

				if (this.isCompute) {
					this.number = val;
				} else {
					this.number += val;
				}

				this.isCompute = false;
			},
			clear(){
				this.number = '';
				this.num_a = '';
				this.op = '';
				this.isCompute = false;
			},
			// 点击退格键
			backspace() {
				if (this.number.length) this.number = this.number.substr(0, this.number.length - 1);
			},
			operator(op) {
				if (!this.number.length) return
				
				if (this.isCompute){
					this.op = op;
					return;
				}
				
				this.isCompute = true;
				let num = parseFloat(this.number);
				
				if(this.num_a === ''){
					// 左边数字
					this.op = op;
					this.num_a = num;
					return;
				} 
				
				let n_a = parseFloat(this.num_a);
				
				// 右边数字, 开始计算ß
				if (this.op === '+')
					n_a += num;
				else if (this.op === '-')
					n_a -= num;
				else if (this.op === '×')
					n_a *= num;
				else if (this.op === '÷')
					n_a /= num;
				else if (op === '=')
					return
					
				this.num_a = parseFloat(n_a).toFixed(2);
				this.number = this.num_a;
				this.op = op;
				
				
			}

		}
	}
</script>

<style lang="scss">
	.calc-panel {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 44px);
	}

	.calc-panel-input {
		display: flex;
		padding: 20rpx;
		height: 200rpx;
		align-items: center;
	}

	.key-grids {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// border: 1px solid red;

		.key-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 25%;
			background-color: $uni-text-color;
			font-size: 50rpx;
			font-weight: 500;
			text-align: center;
			color: $uni-text-color-inverse;
		}

		.key-item-calc {
			background-color: #dd524d;
		}

		.b-keyboard-hover {
			background-color: $uni-text-color-placeholder;
		}
	}
</style>
